<style>
.index-con {
  min-height: 100vh;
  background: #8db732
    url(https://qs3-1252071497.cos.ap-shanghai.myqcloud.com/shot/static/img/bg1.jpg)
    0 0 no-repeat;
  background-size: 100%;
}
</style>

<template>
  <view class="index-con">
    <view @click="onRaise">
      <view class="pa-3"></view>
      <!-- <u-status-bar /> -->
      <!-- <view class="ta-c fz-18 pa-2" style="color: #73735b"></view> -->

      <view class="mt-9 ta-c white d-center">
        <view class="pos-r">
          <view class="mb-3 fz-16 color-1">认养一颗榴莲树</view>
          <u-button type="primary" shape="circle" :disabled="isIn">
            <span>成为泰农合伙人</span>
          </u-button>
        </view>
      </view>

      <view style="height: 320px"></view>
    </view>

    <view class="pa-3 mt-1">
      <view class="bdrs-8 bg-cell pa-3">
        <view class="mb-4 al-c">
          <view class="fw-b">合伙人权益</view>
          <span
            class="ml-auto color-1 fz-14 hover-1"
            @click="$navTo('shop/rule')"
            >权益规则</span
          >
        </view>

        <view
          class="pa-3 mt-3 bg-benefit bdrs-8 lh-15 hover-1 pos-r"
          v-for="(it, i) in benefits"
          :key="i"
          @click="onBenefit(it)"
        >
          <view class="al-c">
            <view class="mr-auto">
              <view>{{ it.name }}</view>
              <view class="fz-14 op-4 mt-1">{{ it.bio }}</view>
            </view>
            <view class="fz-13 op-5 mr-2" v-show="isIn">
              <span>0/{{ it.total }}</span>
            </view>
            <span
              class="iconfont fz-25"
              :class="['icon-' + it.icon, isIn ? 'color-1 op-4' : 'op-2']"
            ></span>
          </view>
        </view>
      </view>
    </view>

    <view class="pa-5"></view>
  </view>
</template>

<script>
import { mapState } from "vuex";

export default {
  computed: {
    ...mapState(["userInfo"]),
    isIn() {
      return this.userInfo.status == 3;
    },
  },
  data() {
    return {
      benefits: [
        {
          name: "专属大礼包",
          bio: "礼品丰富，先到先得",
          icon: "gift",
          total: 1,
        },
        {
          name: "每年12颗榴莲果",
          bio: "5年后，每年获得认养果树30%收益",
          icon: "jifen",
          link: "shop/durian",
          total: 180,
        },
        {
          name: "邀请福利",
          bio: "好友成为合伙人，立享返佣",
          icon: "invite",
          link: "user/coin-log",
          total: 5,
        },
      ],
    };
  },
  methods: {
    onRaise() {
      const params = {};
      let path = "shop/raise";
      if (!this.userInfo.phone && !this.userInfo.bot_uid) {
        params.to = path;
        path = "mine/login";
      }
      this.$navTo(path, params);
    },
    async onBenefit(it) {
      if (!this.isIn) {
        await this.$confirm("认养一颗榴莲树，即可解锁权益", {
          confirmText: "去认养",
        });
        this.onRaise();
        return;
      }
      if (!this.userInfo.id) {
        return;
      }
      if (it.link) {
        this.$navTo(it.link);
      } else if (it.icon == "gift") {
        this.$switchTab("shop");
      }
    },
  },
};
</script>
